//第一个模块
import React, { useState } from 'react';
import { Button, Modal } from 'antd';
import Instantly from '../Instantly/index';
import './index.css';

/**
 * 主页组件，展示企业营销解决方案的介绍信息，并提供一个按钮触发模态框展示更多内容。
 */
const Index: React.FC = () => {
    // 控制模态框显示状态的变量
    const [isModalOpen, setIsModalOpen] = useState(false);

    // 显示模态框的方法
    const showModal = () => {
        setIsModalOpen(true);
    };

    // 关闭模态框的方法
    const handleCloseModal = () => {
        setIsModalOpen(false);
    };

    return (
        <div className='kkk-box'>
            {/* 背景视频 */}
            <video autoPlay muted loop className='kkk-vie' src="https://cdn.dancf.com/fe-assets/20231204/ac0f2eb25a81c4ec41964ed319a08eb7.webm"></video>
            {/* 内容展示区 */}
            <div className='kkk-corp'>
                <h1>视觉内容创新方案驱动企业营销增长</h1>
                <p>全链路数字化内容中台，助力企业营销降本增效，为数字化时代快速迭代的内容营销持续赋能</p>
                {/* 按钮，点击后显示模态框 */}
                <Button type="primary" onClick={showModal}>
                    立即咨询
                </Button>
                {/* 模态框，用于展示更多内容 */}
                <Modal footer={null} open={isModalOpen} onOk={handleCloseModal} onCancel={handleCloseModal}>
                    <Instantly />
                </Modal>
            </div>
        </div>
    );
};

export default Index;